<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link th:href="@{/animate.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/common.js}"></script>


    <style>

        a {
            cursor: pointer;
        }

        .line {
            border-bottom: 2px solid #eee;
            margin-bottom: 5px;
            height: 2%;
        }

        #addTopicBtn {
            transition: 400ms;
            width: 70px;
            height: 70px;
            background-color: #fff;
            border: none;
            box-shadow: 0 0 10px #adadad;
            border-radius: 50%;
            position: fixed;
            right: 4%;
            bottom: 8%;
        }

        #addTopicBtn:hover {
            transition: 700ms;
            width: 72px;
            height: 72px;
            cursor: pointer;
            box-shadow: 0 0 15px #adadad;

        }

    </style>

</head>
<body style="background-color: #F8F8F8;overflow-x: hidden">
<div>

    <!--    顶部导航-->
    <div class="layui-header" style="background-color: black;">
        <ul class="layui-nav layui-layout-left" style="background-color: black">
            <li class="layui-nav-item layui-this"><a
                    onclick="window.location.href='/user/index?loginName='+ getQueryVariable('loginName')">首页</a></li>
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/myTopic?loginName='+ getQueryVariable('loginName')">我的话题</a>
            </li>
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/followedTopic?loginName='+ getQueryVariable('loginName')">关注话题</a>
            </li>
            <li class="layui-nav-item"><a
                    onclick="window.location.href='/user/info?loginName='+ getQueryVariable('loginName')">个人中心</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right" style="background-color: black">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <span><text th:text="${param.loginName}"></text></span>
                </a>
            </li>
            <li class="layui-nav-item"><a th:href="@{/userController/logout}">退出</a></li>
        </ul>
    </div>

    <!--板块-->
    <div id="tagsDiv" style="padding: 20px;position: relative;left: 100px">
        <span id="tagsSpan">
            <a><span id="initTag" onclick='loadTopics(layer,this)' class="tag">全部</span></a>
        </span>
    </div>


    <!--    内容-->
    <div id="topicsArea" style="position: center">
        <!--        <div class="animated fadeIn" style="display: flex;justify-content: center;padding: 15px;border: 2px solid red">-->
        <!--            <div style="width: 80%;height: 100%;background-color: #fff;border: solid #E0E0E0 1px;border-radius:-->
        <!--                    15px;box-shadow:0 0 10px #E0E0E0;padding:10px">-->

        <!--                &lt;!&ndash;                标题栏&ndash;&gt;-->
        <!--                <div style="display: flex;padding: 10px;align-items: center;height: 5%">-->
        <!--                    <div style="width: 85%;">-->
        <!--                        <span style="font-size: 18px">丢失钥匙</span>-->
        <!--                    </div>-->
        <!--                    <div style="text-align: right;width:15%">-->
        <!--                        <span style="font-size: 15px;color: #A4A4A4">待解决</span>-->
        <!--                    </div>-->
        <!--                </div>-->

        <!--                <div class="line"></div>-->

        <!--                &lt;!&ndash;                正文&ndash;&gt;-->
        <!--                <div style="height: 75%;padding: 10px">-->
        <!--                    <div>-->
        <!--                        <span style="font-size: 15px">丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙-->
        <!--                        丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙-->
        <!--                        丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙-->
        <!--                        丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙-->
        <!--                        丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙-->
        <!--                        丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙丢失钥匙</span>-->
        <!--                    </div>-->
        <!--                </div>-->

        <!--                &lt;!&ndash;                底部&ndash;&gt;-->
        <!--                <div style="display: flex;padding: 10px;height:5% ">-->
        <!--                    <div style="width: 85%;position: relative;top: 8px; ">-->
        <!--                        <span style="font-size: 13px;color: #A4A4A4">yumeno 发布于 2021.3.19</span>-->
        <!--                    </div>-->
        <!--                    <div style="text-align: right;width:15%;position: relative;top: 8px; ">-->
        <!--                        <button type="button" style="cursor: pointer;font-size: 13px;background-color: #fff;color:-->
        <!--                        #A4A4A4;border:-->
        <!--                        none">查看详情-->
        <!--                        </button>-->
        <!--                    </div>-->
        <!--                </div>-->

        <!--            </div>-->
        <!--        </div>-->
    </div>

    <!--    底部-->
    <div style="padding: 20px;text-align: center;font-size: 15px;color: #A4A4A4">
        <div>再怎么刷新也没有啦</div>
    </div>

    <!--发布按钮-->
    <div>
        <button style="outline: none" type="button" id="addTopicBtn"
                onclick="addTopic()"
                class="btn btn-primary">
            <span style="text-align: center;font-size: 60px"><strong>+</strong></span>
        </button>
    </div>

</div>


<script th:src="@{/layui/jquery-1.11.2.js}"></script>
<script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
<script>
    $(function () {
        layui.use(['element', 'form', 'table', 'layer'], function () {
            var element = layui.element;
            var form = layui.form;
            var table = layui.table;
            var layer = layui.layer;
            loadTag(layer);
            $("#initTag").click();
        });
    });

    function addTopic() {
        let loginName = getQueryVariable("loginName");
        window.location.href = '/user/addTopic?loginName=' + loginName + '&type=create';
    }


    function loadTag(layer) {
        let tagsSpan = $("#tagsSpan");
        //默认显示 “全部” 板块

        $.get("/topicController/loadTags", null, function (resp) {
            if (resp.code == 0) {
                $.each(resp.data, function (index, tag) {
                    tagsSpan.append(" | <a><span onclick='loadTopics(layer,this)' class='tag' style='color:#A4A4A4'>"
                        + tag.tagName +
                        "</span></a>")
                });
            } else {
                layer.msg(resp.msg);
            }
        }, "json");
    }


    function loadTopics(layer, element) {
        $(".tag").css("color", "#A4A4A4");
        $(element).css("color", "#000");
        let tag = $(element).text();
        let topicsArea = $("#topicsArea");
        topicsArea.empty();
        $.get("/topicController/loadTopics", {tag: tag}, function (resp) {
            if (resp.code == 0) {
                $.each(resp.data, function (index, topic) {
                    let id = topic.id;
                    let title = topic.title;
                    let content = topic.content;
                    let createTime = topic.createTime;
                    let updateTime = topic.updateTime;
                    let creatorLoginName = topic.creatorLoginName;
                    let updaterLoginName = topic.updaterLoginName;
                    let tagName = topic.tagName;
                    let state = topic.state == '0' ? '待解决' : "已解决";
                    let creatorOrUpdater = updaterLoginName == null ? creatorLoginName + ' 发布于 ' + createTime : updaterLoginName + ' 更新于 ' + updateTime;

                    let topicDivParent = $("<div class='animated fadeIn' style='display: flex;justify-content: center;padding: 5px;' >");
                    let topicDiv = $("<div style='width: 80%;height: 100%;background-color: #fff;border: solid #E0E0E0 1px;border-radius: 15px;box-shadow:0 0 10px #E0E0E0;padding:10px' >");

                    //标题
                    topicDiv.append("<div style=\"display: flex;padding: 10px;align-items: center;height: 5%\" >" +
                        " <div style='width: 85%;'>" +
                        "                        <span style='font-size: 18px;margin-right: 10px'>" + title + "</span>" +
                        "                        <span class=\"layui-badge layui-bg-black\" style='position: relative;bottom:3px'>"
                        + tagName + "</span>" +
                        "                    </div>" +
                        "                    <div style='text-align: right;width:15%'>" +
                        "                        <span style='font-size: 15px;color: #A4A4A4'>" + state +
                        "</span>" +
                        "                    </div>" +
                        "</div>" +
                        "<div class=\"line\"></div>");

                    //正文
                    topicDiv.append("<div style=\"height: 75%;padding: 10px\">" +
                        "                    <div>" +
                        "                        <span style=\"font-size: 15px\">" + content + "</span>" +
                        "                    </div>" +
                        "                </div>");

                    //底部
                    topicDiv.append("<div style=\"display: flex;padding: 10px;height:5% \">" +
                        "                    <div style=\"width: 85%;position: relative;top: 8px; \">" +
                        "                        <span style=\"font-size: 13px;color: #A4A4A4\">" + creatorOrUpdater + "</span>" +
                        "                    </div>" +
                        "                    <div style=\"text-align: right;width:15%;position: relative;top: 8px; \">" +
                        "                        <button type=\"button\" style=\"cursor: pointer;font-size: 13px;background-color: #fff;color:" +
                        "                        #A4A4A4;border:none\" onclick='window.location.href=\"/user/topicDetail?loginName=" + getQueryVariable("loginName") + "&id=" + id + "\"'>查看详情</button>" +
                        "                    </div>" +
                        "                </div>");

                    topicDivParent.append(topicDiv);
                    topicsArea.append(topicDivParent);
                });


            } else {
                layer.msg(resp.msg);
            }
        }, "json")
    }
</script>
</body>
</html>